//创新创效精选
import React, {Component} from 'react';
import {
  View,
  StyleSheet,
  Text,
  ListView,
  TouchableHighlight,
  RefreshControl,
  TouchableOpacity,
} from 'react-native';

import { Button } from 'react-native-elements';

import Config from '../../config';
import WH_Constants from './WH_Constants'
import BaseComponent from '../common/BaseComponent';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import CommonStyles from '../../common/CommonStyles';
import WH_RequestPostsAction from '../../actions/workhard/WH_RequestPostsAction';
import CommonDataListView from '../common/CommonDataListView';
import CommonViewPagerMultiShow from '../common/CommonViewPagerMultiShow';
import WH_PostItemView from './WH_PostItemView';
import CommonRequestADAction from '../../actions/common/CommonRequestADAction';
import GongGaoItemView from '../home/GongGaoItemView';

const URL ="http://219.235.107.209:8115/?nsukey=J00weZ3sXZyezZQa3aFYCWRo8HoeN73us%2BYZ46asIvKM9pVfcp8uNBnXXvSWnbJHNn6Epc7t8gi8r31wp35QoO3LDAeAMOA23rYGT0223JPLXf5KXMPeQSsWegAqxQ1trxbYG656QAHr3hvkkxHHEEk3F55ZT1Iwze2CO%2BB9cLUbtksfu1sOHll7SqC9kXKS7m2RtsHDScMkGT6qK9BJCA%3D%3D&from=singlemessage&isappinstalled=0";

const LIST_TYPES = [
  {type:"gonggao", headerTitle:"通知公告", hasMoreBtn:true, page_size:4,},
  {type:"online", headerTitle:"精彩在线", hasMoreBtn:true, page_size:4,},
];

export default class WH_IndexNewView extends BaseComponent {
  constructor(props) {
    super(props);

    this._listView = null;
    this._viewPager = null;
  }

  render() {
    return (
      <View style={{backgroundColor:"#ffffff",
          paddingTop:SizeUtils.translateDesignHeightToCode(0)}}>
        <CommonDataListView style={{width:SizeUtils.getWindowSize().width,
            height:SizeUtils.getWindowSize().height - SizeUtils.translateDesignHeightToCode(0) - Config.paddingTop}}
          ref={(ref) => {this._listView = ref}}
          requestData = {this._requestData.bind(this)}
          onRenderItem = {this._onRenderItem.bind(this)}
          onRenderHeader = {this._onRenderHeader.bind(this)}
          noEmpty = {true}
          dataKey = {"post_id"}
        />
      </View>
    )
  }

  _onRenderHeader() {
    return(
      <View style={{paddingTop:SizeUtils.translateDesignNumToCode(0), backgroundColor:"#ffffff",
          paddingBottom:SizeUtils.translateDesignHeightToCode(20)}}>
        {this._renderSmallPager()}
        {this._renderTypeButtons()}
        {LIST_TYPES.map(
            (data, index) => {
              return <RListView  data={data} index={index} key={index}  updateMark={0}/>
            }
          )}
      </View>
    )
  }

  //底部热门
  _renderBottomView() {
    return (
      <View style={{flexDirection:"row",
          marginTop:SizeUtils.translateDesignHeightToCode(30),
          marginBottom:SizeUtils.translateDesignHeightToCode(20),
          justifyContent:"space-between",
          alignItems: "center"}}>
        <View style={{flexDirection:"row", alignItems: "center"}}>
          <TImage source={require("../../../resource/images/common/circle.png")} style={{width:20, height:20}}/>
            <Text style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(28),
              marginLeft:SizeUtils.translateDesignWidthToCode(8), borderWidth:0,
              backgroundColor:"#00000000",
              fontWeight:"bold"}]} >金点子热榜
            </Text>
        </View>
        {/* <TouchableOpacity onPress={this._onPressMoreBtn.bind(this)}>
          <Text style={[CommonStyles.assistText, {fontSize:SizeUtils.translateFontSizeToCode(24),
              backgroundColor:"#00000000", borderWidth:0}]}>
              查看更多>
           </Text>
        </TouchableOpacity> */}
      </View>
    )
  }

  _onRenderItem(data, index) {
    return (<WH_PostItemView refRefresh={this.refRefresh.bind(this)} data={data} />)
  }
  refRefresh(){
    this.doRefresh();
  }
  _onPressMoreBtn() {
    this.gotoPage(Config.pages.wh_type_jdz, {sortType:2});
  }

  _renderSmallPager() {
    return (
    <View style={{width:SizeUtils.getWindowSize().width,
          // height:SizeUtils.translateDesignWidthToCode(356),
          // borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
        }}>
        <CommonViewPagerMultiShow ref={(ref) => this._viewPager = ref} home={this.props.home} type={Constants.SLIDER_TYPE.WORK_HARD} />
      </View>
    )
  }

  _renderTypeButtons() {
    return (
      <View style={{flexDirection: 'row', justifyContent: 'space-around',
          alignItems: 'center',
          paddingBottom:SizeUtils.translateDesignWidthToCode(20),
          paddingRight:SizeUtils.translateDesignWidthToCode(10),
          paddingLeft:SizeUtils.translateDesignWidthToCode(10),
          paddingTop:SizeUtils.translateDesignWidthToCode(20),
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          borderColor:"#eeeeee"}}>
        {this._getPageButton(WH_Constants.TAG.JDZBUN)}
        {this._getPageButton(WH_Constants.TAG.YTBUN)}
      </View>
    )
  }

  _getPageButton(typeData) {
    return (
      <TouchableOpacity
        onPress = {() => this._onPressPageBtn(typeData)}
        style={styles.pageBtn}>
        <TImage source={typeData.icon} style={{width:350,
          height:150}} />
      </TouchableOpacity>
    )
  }

  _onPressPageBtn(typeData) {
    var pageData = null;
    var sortType = 1;
    switch (typeData) {
      case WH_Constants.TAG.TOP10:
        pageData = Config.pages.wh_type_jdz;
        sortType = 3;
        break;
      case WH_Constants.TAG.CYS:
        pageData = Config.pages.wh_type_cys;
        break;
      case WH_Constants.TAG.WXTW:
        pageData = Config.pages.wh_type_wxtw;
        break;
      case WH_Constants.TAG.JDZBUN:
        pageData = Config.pages.wh_type_jdzbtn;
        break;
    }
    if (pageData) {
      this.gotoPage(pageData, {sortType:sortType});
    }
    if (WH_Constants.TAG.YTBUN===typeData) {
      this.gotoPage(Config.pages.post_common_web, {
      url: URL,
      title: '油田工匠'
    });
    }
    
  }

  _requestData(page, listView) {
    
    // new WH_RequestPostsAction().call(listView, {sort_id:1, tag:1, page:page, page_size:10});
    this._viewPager.doRefresh();
  }
}

class RListView extends BaseComponent {
  constructor(props) {
    super(props);

    this.state.listData = [];
    this._timer = null;
  }
  componentDidMount() {
    this._requestData();
  }

  _renderHeader() {
    let moreStr = '更多内容 >';
    return (
      <View style={{flexDirection:"row", paddingLeft:SizeUtils.translateDesignWidthToCode(30),
          paddingRight:SizeUtils.translateDesignWidthToCode(30),
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
          paddingBottom:SizeUtils.translateDesignHeightToCode(20), justifyContent:"space-between",
          paddingTop:SizeUtils.translateDesignHeightToCode(30), alignItems:"center",}}>
        <View style={{flexDirection:"row", alignItems:"center",}}>
          <TImage source={require("../../../resource/images/home/biaotitle.png")} style={{width:8, height:30}}/>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:"#333333",
            marginLeft:SizeUtils.translateDesignWidthToCode(8), borderWidth:0,
            backgroundColor:"#00000000",
            fontWeight:"bold"}} >
            {this.props.data.headerTitle}
          </Text>
        </View>
        <TouchableOpacity onPress={this._onPressMore.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(24), color:"#888888",}}>
            {moreStr}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
  _renderItem(data, index) {
    return(<GongGaoItemView key={index} data={data} index={index} />)
  }
  _requestData() {
    this._timer = setTimeout(()=>{
      clearTimeout(this._timer);
      this._timerComplete();
    }, 200 * this.props.index);
  }
  _timerComplete() {
    if(this.props.data.type == "gonggao") {
      new CommonRequestADAction().call(this, {tag:5,page_size:3}); //公告 5
    }else{
      new CommonRequestADAction().call(this, {tag:6,page_size:3}); //公告 5
    }
  }
  _onPressMore() {
    this.gotoPage(Config.pages.gonggao_list,{tag:this.props.data.type == "gonggao"?5:6,title:this.props.data.headerTitle})
  }
  render() {
    if(!this.state.data||this.state.data.length === 0) {
      return (<View></View>)
    }
    return(
      <View style={[this.props.style,{marginBottom:SizeUtils.translateDesignHeightToCode(20),
          backgroundColor:'#ffffff'}]}>
      {this._renderHeader()}
      {this.state.data.map(
            (data, index) => {
              return this._renderItem(data, index);
            }
        )}
    </View>
    );
  }
}

const styles = StyleSheet.create({
    pageBtn: {

    }
});
